 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>API管理</title>
    {include file="public/head"}
    <style>
    </style>
</head>
<body>
<div class="box">
    <button class="layui-btn" id="add">添加API</button>
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="200">
            <col width="200">
        </colgroup>
        <thead>
        <tr>
            <th>ID</th>
            <th>URL</th>
            <th>接口名称</th>
            <th>所属人</th>
            <th>所属组</th>
            <th>请求方式</th>
            <th>参数</th>
            <th>结果</th>
            <th>排序</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>
    <div  class="page" id="page"></div>
</div>

</body>
<div id="paramBox" style="display: none;margin: 50px 30px;">
    <form class="layui-form" action="" id="paramForm">

    </form>
</div>
<script>
    var field = {};//字段存储
    var form = '';
    var layer = '';
    layui.use(['laypage','form','layer'], function(){
        var laypage = layui.laypage;
        form = layui.form;
        layer=layui.layer;

        $.ajax({
            type:'POST',
            url:'/admin/api/api_data',
            data:{},
            success:function(data){
                if(data.code === 0){
                    dataRender(data.data);
                    laypage.render({
                        elem: 'page'
                        ,count: data.count //数据总数，从服务端得到
                        ,jump: function(obj, first){
                            if(!first){
                                $.ajax({
                                    type:'POST',
                                    url:'/admin/api/api_data',
                                    data:{page:obj.curr,limit:obj.limit},
                                    success:function(data){
                                        if(data.code === 0){
                                            dataRender(data.data);
                                        }else{
                                            layer.msg('暂无数据', {icon: 5});
                                        }
                                        return false;
                                    }
                                });
                            }
                        }
                    });
                }else{
                    layer.msg(data.msg, {icon: 5});
                }
                return false;
            }
        });

        function dataRender(data){
            let html = '';
            data.forEach(function(item,index){
                let paramBut = item.paramNum > 0 ? '<button class="layui-btn layui-btn-radius layui-btn-sm layui-btn-normal" data-id="'+item.id+'" data-type="0" onclick="paramEdit(this)">'+item.paramNum+'</button>' : '无';
                let resultBut = item.resultNum > 0 ? '<button class="layui-btn layui-btn-radius layui-btn-sm layui-btn-normal" data-id="'+item.id+'" data-type="1" onclick="paramEdit(this)">'+item.resultNum+'</button>' : '无';
                let statusBut = item.status === 1 ? '<button class="layui-btn layui-btn-sm" data-id="'+item.id+'" data-status="0" data-title="禁用" onclick="editStatus(this)"><i class="layui-icon">&#xe651;</i></button>' : '<button class="layui-btn layui-btn-sm" data-id="'+item.id+'" data-status="1" data-title="启用" onclick="editStatus(this)"><i class="layui-icon">&#xe652;</i></button>';
                html += '<tr><td>'+item.id+'</td><td>'+item.url+'</td><td>'+item.name+'</td><td>'+item.user_name+'</td><td>'+item.groupName+'</td><td>'+item.request+'</td><td>'+paramBut+'</td><td>'+resultBut+'</td><td>'+item.sort+'</td><td>'+item.statusMsg+'</td><td>'+item.create_time+'</td><td><button class="layui-btn layui-btn-sm" data-id="'+item.id+'" onclick="edit(this)"><i class="layui-icon">&#xe642;</i></button>'+statusBut+'</td></tr>';
            });
            $("#tbody").html(html);
        }


        $("#add").click(function(){
            window.location.href='/admin/api/api_add';
        });


        form.on('submit(param_edit_do)', function(data){
            $.ajax({
                type:'POST',
                url:'/admin/api/param_edit_do',
                data:data.field,
                success:function(data){
                    console.log(data);
                    if(data.code === 0){
                        layer.msg('操作成功', {
                            icon: 1,
                            time:2000
                        },function(){
                            layer.closeAll();
                        });
                    }else{
                        layer.msg('操作失败', {icon: 5});
                    }
                    return false;
                }
            });
            return false;
        });

    });

    function edit(self){
        let id = $(self).data("id");
        window.location.href='/admin/api/api_edit?id='+id;
    }

    function editStatus(self)
    {
        let id = $(self).data("id");
        let status = $(self).data("status");
        let title = $(self).data("title");
        layer.confirm('确定要'+title+'吗？', {
            btn: ['确定','取消']
        }, function(){
            $.ajax({
                type:'POST',
                url:'/admin/api/api_status_edit_do',
                data:{id:id,status:status},
                success:function(data){
                    if(data.code === 0){
                        layer.msg('操作成功', {
                            icon: 1,
                            time:2000
                        },function(){
                            let statusBut = status === 1 ? '<button class="layui-btn layui-btn-sm" data-id="'+id+'" data-status="0" data-title="禁用" onclick="editStatus(this)"><i class="layui-icon">&#xe651;</i></button>' : '<button class="layui-btn layui-btn-sm" data-id="'+id+'" data-status="1" data-title="启用" onclick="editStatus(this)"><i class="layui-icon">&#xe652;</i></button>';
                            $(self).parent().prev().prev().html(title);
                            $(self).before(statusBut).remove();
                            layer.closeAll();
                        });
                    }else{
                        layer.msg(data.msg,{icon:5});
                    }
                    return false;
                }
            });
        }, function(){
            layer.closeAll();
        });
    }
    function paramEdit(self){
        let id = $(self).data("id");
        let type = $(self).data("type");
        if(!id){
            layer.msg('参数错误', {icon: 5});
            return false;
        }
        $("#paramForm").html('');//清空弹框
        $.ajax({
            type:'POST',
            url:'/admin/api/param_edit',
            data:{id:id,type:type},
            success:function(data){
                if(data.code === 0){
                    let paramList = data.data;
                    if(paramList.length > 0){
                        paramList.forEach(function(item,index){
                            editParamHtml(index,item);
                        });
                        let but = '<div class="layui-form-item" style="margin-top: 30px;">\n' +
                            '            <div class="layui-input-block" style="margin-left: 43%;">\n' +
                            '                <button class="layui-btn" lay-submit lay-filter="param_edit_do">确定</button>\n' +
                            '                <button class="layui-btn layui-btn-primary" type="button" onclick="layer.closeAll();">取消</button>\n' +
                            '            </div>\n' +
                            '        </div>';
                        $("#paramForm").append(but);
                        form.render();

                        layer.open({
                            type:1,
                            area: '900px',
                            content:$("#paramBox")
                        });
                    }
                }else{
                    layer.msg('暂无数据', {icon: 5});
                }
                return false;
            }
        });
    }

    function editParamHtml(num,item){
        let html = '<div class="layui-form-item">\n' +
                '<input type="hidden" name="param['+num+'][id]" value="'+item.id+'">'+
            '                <div class="layui-input-inline">\n' +
            '                    <input type="text" name="param['+num+'][param_name]" required lay-verify="required" placeholder="name" autocomplete="off" class="layui-input" value="'+item.param+'" disabled>\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <select name="param['+num+'][param_type]" id="param_type_'+num+'">\n' +
            '                        <option value="String">String</option>\n' +
            '                        <option value="Long">Long</option>\n' +
            '                        <option value="Integer">Integer</option>\n' +
            '                        <option value="Short">Short</option>\n' +
            '                        <option value="Byte">Byte</option>\n' +
            '                        <option value="Float">Float</option>\n' +
            '                        <option value="Double">Double</option>\n' +
            '                        <option value="BigDecimal">BigDecimal</option>\n' +
            '                        <option value="Boolean">Boolean</option>\n' +
            '                        <option value="Json">Json</option>\n' +
            '                        <option value="其他">其他</option>\n' +
            '                    </select>\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <select name="param['+num+'][must]" id="param_must_'+num+'">\n' +
            '                        <option value="1">必须</option>\n' +
            '                        <option value="0">非必须</option>\n' +
            '                    </select>\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <input type="text" name="param['+num+'][explain]"  placeholder="参数说明" autocomplete="off" class="layui-input" value="'+item.explain+'">\n' +
            '                </div>\n' +
            '            </div>';
        $("#paramForm").append(html);
        $("#param_type_"+num).val(item.filed_type);
        $("#param_must_"+num).val(item.must);
    }

</script>
</html>